import React, { useState, useEffect } from "react"
import "./Home.scss"
import { getIndexNav, getCarouselList, getRankList, getArticlePage } from "../../services/index"
import { INavItem, ICarouselItem, IRankItem, ArticleItem } from '../../utils/interface';
import { useHistory } from "react-router-dom"
import Swiper from "swiper"
import "swiper/css/swiper.css"
import LazyLoad from "../../utils/LazyLoad"
const Home: React.FC = () => {
    let history = useHistory()
    let [list, setList] = useState<INavItem[]>([]);
    let [carouseList, setcarouseList] = useState<ICarouselItem[]>([]);
    let [rankList, setRankList] = useState<IRankItem[]>([]);
    let [articlePage, serArticlePage] = useState<ArticleItem[]>([])
    let [carIndex, setCarIndex] = useState<number>(0)
    useEffect(() => {

        getIndexNav().then(res => {

            setList(res.data.rankCategoryList);
        })

        getCarouselList().then(res => {
            setcarouseList(res.data.carouselList);
        })

        getRankList().then(res => {
            setRankList(res.data.dataList);
        })
        //严选最新
        getArticlePage().then(res => {
            serArticlePage(res.data.dataList);
        })

    }, [])

    useEffect(() => {
        //轮播图实例 
        let mySwiper = new Swiper(".banners", {
            on: {
                slideChange: function () {
                    let cls = document.querySelector(".navList")
                    if (carIndex >= 4) {
                        let num = (carIndex - 2) * 60;
                        (cls as Element).scrollLeft = num
                    }
                    if (carIndex < 4) {
                        (cls as Element).scrollLeft = 0
                    }
                    setCarIndex((this as { activeIndex: number }).activeIndex)
                },
            }
        })
        mySwiper.slideTo(carIndex, 100, false)
    }, [carIndex])

    useEffect(() => {
        setTimeout(() => {
            new Swiper(".bannerst", {
                autoplay: true,
                loop: true,
            })
        }, 100)
    }, [])

    useEffect(() => {
        if (carouseList.length && rankList.length && articlePage) {
            new LazyLoad();
        }
    }, [carouseList, rankList, articlePage])

    function clickNav(e: React.MouseEvent) {
        if (e.target !== e.currentTarget) {
            let num = parseInt((e.target as HTMLElement).dataset.index || '0')
            setCarIndex(num)
        }
    }
    return <div className="home">
        <section className="ipts1">
            <div><input type="text" placeholder="输入搜索内容" onClick={() => history.push("/search")} /></div>
        </section>
        {/* 顶部导航 */}
        <section className="navList" onClick={clickNav}>{
            list.map((item, index) => {
                return <li className={carIndex === index ? 'active' : ''} key={item.id} data-id={item.id} data-index={index} >{item.name}</li>
            })
        }</section>
        <div className="swiper-container banners">
            <div className="swiper-wrapper">
                <div className="swiper-slide">

                    {/* 当前分类轮播 */}
                    <div className="swiper-container bannerst">
                        <div className="swiper-wrapper">
                            {
                                carouseList.map(item => {
                                    return <div key={item.ranksId} className="swiper-slide banner"><img data-src={item.image} key={item.ranksId} alt="" /></div>
                                })
                            }
                        </div>
                    </div>


                    {/* 当前分类 */}
                    <section className="lis">
                        {
                            rankList.map(item => {
                                return <li key={item.id}>
                                    <h2><img data-src={item.image} alt="" /></h2>
                                    <span>{item.name}</span>
                                </li>
                            })}
                    </section>
                    <section className="getArticlePage">
                        {
                            articlePage.map((item) => {
                                return <div key={item.id} >
                                    <h2><img data-src={item.image} alt="" /></h2>
                                    <p>{item.title}1</p>
                                    <div>
                                        <span>{item.nickname}</span>
                                        <span>推荐值:{item.official}</span>
                                    </div>
                                </div>
                            })
                        }
                    </section>
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
                <div className="swiper-slide">
                    媳妇
                </div>
            </div>
        </div>









    </div>
}
export default Home